<template>
	<view class="container">
		<view class="nav-bar bfw" :style="'padding-top:' + statusBarHeight + 'px'">
			<!-- <view class="bar-box df" :style="'height:' + titleBarHeight + 'px;width:100%'">
				<view class="bar-back df" @click="navBack">
					<image src="/static/img/z.png" style="width:34rpx;height:34rpx"></image>
				</view>
				<view class="bar-title ohto">圈子</view>
			</view> -->
			<view class="nav-box df">
				<view class="nav-title df" :style="'height:' + titleBarHeight + 'px'">
					<view>圈子</view>
				</view>
			</view>
			<view class="nav-box df">
				<view v-for="(item,i) in barList" :key="i" class="nav-item df" @click="barClick" :data-idx="i">
					<text :style="'color:' + (i == barIdx ? '#000' : '#999') + ';font-size:' + (i == barIdx ? '28rpx' : '26rpx')">{{item}}</text>
					<view :style="'opacity:' + (i == barIdx ? 1 : 0)" class="nav-line"></view>
				</view>
			</view>
		</view>
		<view class="content-box" :style="'margin-top: calc(' + (statusBarHeight + titleBarHeight) + 'px + 90rpx)'">
			<view class="heio" :style="'height:' + (isThrottling || 'loading' == loadStatus ? '0px' : '60px')">
				<uni-load-more :showText="false" status="loading"></uni-load-more>
			</view>
			<view v-if="isEmpty" class="empty-box df">
				<image src="/static/img/inset/circle.png" />
				<view class="e1">{{0 == barIdx ? "暂无推荐圈子" : "暂无加入圈子"}}</view>
				<view class="e2">空空如也，等待探索</view>
			</view>
			<block v-else>
				<view v-for="(item,i) in list" :key="i" class="list-box df" @click="toCircle(item.id)">
					<view class="list-avatar">
						<lazy-load :src="item.avatar" borderRadius="168rpx"></lazy-load>
						<view v-if="item.is_hot" class="tag" style="background:#FA5150"></view>
						<view v-elif="item.is_new" class="tag" style="background:#4CD964"></view>
					</view>
					<view class="list-item">
						<view class="name ohto2">{{item.name}}</view>
						<view class="intro ohto2">{{item.intro}}</view>
						<view v-if="item.user_count > 0" class="cu-img-group">
							<view v-for="(u,b) in item.user" :key="b" class="cu-img">
								<image :src="u" mode="aspectFill"></image>
							</view>
							<view class="cu-txt">{{item.user_count}}人加入 · {{item.dynamic_count}}篇笔记</view>
						</view>
					</view>
				</view>
			</block>
			<uni-load-more :showText="false" v-if="loadStatus=='loadStatus'" status='loadStatus' ></uni-load-more>
		</view>
		<!-- Tips Box -->
		<uni-popup ref="tipsPopup" type="top" mask-background-color="rgba(0, 0, 0, 0)">
			<view class="tips-box df" :style="{marginTop: statusBarHeight+44+'px'}">
				<view class="tips-item">{{tips_title}}</view>
			</view>
		</uni-popup>
		<tabbar currentPage="1" :currentMsg="currentMsg" :userAvatar="userAvatar"></tabbar>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	export default {
		components: {},
		data() {
			return {
				barList: ["全部", "我的"],
				barIdx: 0,
				titleBarHeight: app.globalData.titleBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				scrollTop: 0,
				navbarTrans: 0,
				putarr: [],
				user_hot: [],
				topic_hot: [],
				list: [],
				page: 1,
				isEmpty: false,
				isThrottling: !0,
				loadStatus: "loading",
			}
		},
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			//this.getTopCircle();
			this.getTopicHot();
			this.getUserHot();
			this.getCircleList();
			uni.stopPullDownRefresh();
		},
		async onLoad() {
			util.showShareMenu();
			await this.$onLaunched;
			//this.getTopCircle();
			this.getTopicHot();
			this.getUserHot();
			this.getCircleList();
		},
		onShow() {
			util.getMessageCount();
		},
		methods: {
			barClick(e) {
				this.list=[];
				if(this.isThrottling){
					this.isThrottling = !1
					console.log(e);
					this.barIdx = e.currentTarget.dataset.idx
					this.page = 1
					this.getCircleList();
				}
			},
			getCircleList() {
				let that = this;
				util.request(api.getCircleListUrl, {
					page: that.page,
					barIdx:that.barIdx,
				}).then(function(res) {
					//that.loadStatus = "more";
					that.isThrottling = !0;
					if (res.data.data.length > 0) {
						that.list = that.list.concat(res.data.data);
						that.page = res.data.current_page;
						that.loadStatus = 'more';
					} else if (that.page == 1) {
						that.isEmpty = true;
						that.loadStatus = 'more';
					} else {
						that.loadStatus = 'no-more';
					}
				});
			},
			getTopCircle() {
				let that = this;
				util.request(api.getTopCircleUrl).then(function(res) {
					that.putarr = res.data;
				});
			},
			getTopicHot() {
				let that = this;
				util.request(api.getTopicHotUrl).then(function(res) {
					that.topic_hot = res.data;
				});
			},
			getUserHot() {
				let that = this;
				util.request(api.getUserHotUrl).then(function(res) {
					that.user_hot = res.data;
				});
			},
			navigateToFun(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: '/pages/' + url
				})
			},
			topicClick(id) {
				uni.navigateTo({
					url: '/pages/topic/topic?id=' + id
				})
			},
			toCircle(id) {
				uni.navigateTo({
					url: '/pages/circle/details?id=' + id
				})
			},
			toUser(id) {
				uni.navigateTo({
					url: '/pages/user/details?id=' + id
				})
			},
		},
		onReachBottom() {
			if (this.list.length) {
				this.page = this.page + 1;
				this.getCircleList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			let frontColor = "#ffffff";
			var trans = (e.scrollTop > 200 ? 200 : e.scrollTop) / 200;
			if (trans >= 1) {
				frontColor = "#000000";
			}
			this.navbarTrans = trans;
			uni.setNavigationBarColor({
				frontColor: frontColor,
				backgroundColor: "#ffffff",
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onShareAppMessage: function() {},
		onShareTimeline(res) {
			return {
				title: app.globalData.shareTitle
			}
		},
	}
</script>

<style lang="scss">
	@import url("/static/css/center/circle.css");
	.nav-box .nav-title {
	  padding: 0 30rpx;
	  font-size: 40rpx;
	  font-weight: 700;
	}
</style>